<template>
	<view class="coupon-page">
		<view class="coupon-list">
			<view class="coupon-card" v-for="(item, index) in myCoupons" :key="index">
				<view class="card-main">
					<view class="card-left">
						<view class="title-row">
							<view class="coupon-tag">{{item.typeStr}}</view>
							<view class="coupon-title">{{item.title}}</view>
						</view>
						<view class="coupon-date">有效期至 {{item.expire}}</view>
						<view class="coupon-detail" @click="toggleDetail(index)" style="display:flex;align-items:center;gap:8rpx;">
							详细信息
							<text :style="{display:'inline-block',transform: showDetailArr[index] ? 'rotate(180deg)' : 'rotate(0deg)',transition: 'transform 0.2s'}">▼</text>
						</view>
					</view>
					<view class="card-right" :class="item.status">
						<view class="corner-badge">{{ statusText(item.status) }}</view>
						<view class="amount-section">
							<text class="amount-symbol" v-if="item.type != 3">¥</text>
							<text class="amount-value">{{item.discount}}</text>
							<text class="amount-value" v-if="item.type == 3">折</text>
						</view>
						<view class="amount-condition" v-if="item.type==1">满{{item.basePrice}}元可用</view>
					</view>
				</view>
				<view v-if="showDetailArr[index]" class="coupon-extra-detail">
					<view>限品类：{{item.detail.type}}</view>
					<view>限平台：{{item.detail.platform}}</view>
					<view>券编号：{{item.detail.code}}</view>
					<view>{{item.detail.note}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/utils/api'
export default {
	data() {
		return {
			myCoupons: [],
			showDetailArr: []
		}
	},
	onShow() {
		this.loadData()
	},
	methods: {
		loadData() {
			api.mineCoupons().then(res => {
				this.myCoupons = Array.isArray(res.data) ? res.data : []
				this.showDetailArr = new Array(this.myCoupons.length).fill(false)
			})
		},
		toggleDetail(index) {
			this.$set(this.showDetailArr, index, !this.showDetailArr[index])
		},
		statusText(status) {
			if (status === 'used') return '已用'
			if (status === 'expired') return '过期'
			return '生效中'
		}
	}
}
</script>

<style lang="scss" scoped>
$c-bg: #f7f8fa;
$c-blue: #4d8afd;
$c-blue-grad: linear-gradient(135deg, #6db4ff 0%, #377dff 100%);
$c-orange-grad: linear-gradient(135deg, #ffb86c 0%, #ff7b2c 100%);
$c-gray: #b3b3b3;
$c-btn-blue: #377dff;
$c-btn-gray: #e5e5e5;
$c-btn-gray-text: #b3b3b3;

.coupon-page {
	min-height: 100vh;
	background: $c-bg;
	padding: 24rpx 0;
}

.coupon-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 0 16rpx;
}

.coupon-card {
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	background: #fff;
	overflow: hidden;
	position: relative;
	min-height: 120rpx;
}

.card-main {
	display: flex;
	flex-direction: row;
	position: relative;
	z-index: 2;
}

.card-left {
	flex: 1;
	padding: 28rpx 18rpx 28rpx 28rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	.title-row {
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
	}
	.coupon-tag {
		width: auto;
		display: inline-block;
		background: $c-blue;
		color: #fff;
		font-size: 16rpx;
		border-radius: 16rpx;
		padding: 2rpx 14rpx;
		margin-right: 10rpx;
	}
	.coupon-title {
		font-size: 20rpx;
		font-weight: bold;
		color: #222;
		display: flex;
		align-items: center;
	}
	.coupon-date {
		font-size: 20rpx;
		color: #222;
		margin-bottom: 6rpx;
	}
	.coupon-detail {
		font-size: 18rpx;
		color: $c-gray;
		display: flex;
		justify-content: space-between;
	}
}

.card-right {
	width: 190rpx;
	background: $c-blue-grad;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
	padding: 18rpx 0 18rpx 0;
	z-index: 2;

	&.used, &.expired {
		background: linear-gradient(135deg, #e5e5e5 0%, #b3b3b3 100%);
		.amount-section {
			.amount-symbol,
			.amount-value {
				color: #666;
			}
		}
		.amount-condition {
			color: #666;
		}
	}

	&::before, &::after {
		content: '';
		position: absolute;
		left: -10rpx;
		width: 20rpx;
		height: 20rpx;
		background: $c-bg;
		border-radius: 50%;
		z-index: 2;
	}
	&::before {
		top: 0;
		transform: translateY(-50%);
	}
	&::after {
		bottom: 0;
		transform: translateY(50%);
	}
	.corner-badge {
		position: absolute;
		top: 0;
		right: 0;
		background: $c-orange-grad;
		color: #fff;
		font-size: 16rpx;
		padding: 2rpx 12rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		z-index: 3;
	}
	.amount-section {
		display: flex;
		align-items: flex-end;
		margin-bottom: 8rpx;
		margin-top: 10rpx;
		.amount-symbol {
			font-size: 22rpx;
			color: #fff;
			font-weight: bold;
			margin-right: 2rpx;
		}
		.amount-value {
			font-size: 40rpx;
			color: #fff;
			font-weight: bold;
			line-height: 1;
		}
	}
	.amount-condition {
		font-size: 18rpx;
		color: #e6f0ff;
		margin-bottom: 14rpx;
	}
}

.coupon-extra-detail {
	width: 100%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.01);
	border-bottom-left-radius: 20rpx;
	padding: 20rpx 28rpx;
	color: #888;
	font-size: 16rpx;
	animation: fadeIn 0.2s;
	position: relative;
	z-index: 1;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10rpx); }
	to { opacity: 1; transform: translateY(0); }
}
</style>


